<!--
 * @Author: licongwei
 * @Date: 2022-03-14 09:52:50
 * @Description: 预警预报
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <ul class="list" @click="router.push('/M4')">
        <!-- <ul class="list"> -->
        <li class="item" v-for="(item, index) of data" :key="index">
          <number-scroll
            class="value"
            :number="item.value"
            :color="'#fff'"
            :fontSize="22"
          ></number-scroll>
          <p class="name">{{ item.name }}</p>
        </li>
      </ul>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
interface IState {
  title: string
  data: any[]
  getData: (val: string) => void
}
export default defineComponent({
  name: 'yjyb',
  components: {
    comBox,
    numberScroll
  },
  props: {
    adcode: {
      type: String,
      default: '650000'
    }
  },
  setup(props) {
    watch(
      () => props.adcode,
      (val) => {
        state.getData(val)
      }
    )
    const state: IState = reactive({
      title: '',
      data: [],
      getData: (val: string) => {
        httpRequest
          .get({ url: 'M1Yjyb', params: { adcode: val } })
          .then((res) => {
            state.title = res.title
            state.data = res.data
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    state.getData(props.adcode)
    const router = useRouter()
    const refreshData = () => {
      state.getData(props.adcode)
    }
    const { title, data } = toRefs(state)
    return {
      router,
      title,
      data,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
ul.list {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
  cursor: pointer;
  li.item {
    width: 90px;
    height: 96px;
    text-align: center;
    .value {
      margin-top: 30px;
    }
    .name {
      margin-top: 40px;
      font-size: 18px;
      font-family: 'AliHYAiHei';
    }
    &:nth-child(1) {
      background: url('../img/yjyb-icon1.png') no-repeat;
      .name {
        color: rgb(255, 48, 48);
      }
    }
    &:nth-child(2) {
      background: url('../img/yjyb-icon2.png') no-repeat;
      .name {
        color: rgb(255, 168, 17);
        // color: rgb(255, 242, 34);
      }
    }
    &:nth-child(3) {
      background: url('../img/yjyb-icon3.png') no-repeat;
      .name {
        color: rgb(255, 242, 34);
        // color: #4aff47;
      }
    }
  }
}
</style>
